<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>配置修改</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" th:href="@{/static/css/font.css}">
    <link rel="stylesheet" th:href="@{/static/css/xadmin.css}">
     <!--<link rel="stylesheet" href="./css/theme5.css"> -->
    <script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script th:src="@{/static/js/html5.min.js}" charset="UTF-8" src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script th:src="@{/static/js/respond.min.js}" charset="UTF-8" src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>接口调用单个数据获取</legend>
</fieldset>
<form class="layui-form layui-form-pane" lay-filter="example">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">身份证</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="identity" name="sfz" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">接口类型</label>
            <div class="layui-input-inline">
                <select name="apiNameEnum" class="layui-select" lay-verify="required" lay-search="" >
                    <option value=""></option>
                    <option value="ZP">公安照片</option>
                    <option value="JTGX">公安家庭关系</option>
                    <option value="TK">自然人特困</option>
                    <option value="DB">自然人低保</option>
                    <option value="HH">自然人火化</option>
                    <option value="HY">自然人婚姻</option>
                </select>
            </div>
            <input type="checkbox" name="isSwitch" lay-skin="switch" lay-text="保存到数据库|不保存到数据库" >
        </div>
        <div class="layui-inline">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="load">立即提交</button>
        </div>
    </div>
    <div class="layui-form-item">
        <textarea class="layui-textarea" id="resultJSON" style="height: 300px;" placeholder="用于返回获取到的数据，请不填" ></textarea>
    </div>
</form>


</body>
<script th:inline="javascript">
    var ctx = [[@{/}]]
    //var type = /*[[${type}]]*/    //获取model中的值
</script>

<script th:inline="none">
    layui.use(['form', 'layedit'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,$ = layui.jquery;

        //监听提交
        form.on('submit(load)', function(data){
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            var indexLoad = layer.load(1);
            $.ajax({
                type: "POST",
                url: ctx + "task/loadData",
                contentType: "application/json", //必须有
                dataType: "json", //表示返回值类型，不必须
                data: JSON.stringify(data.field),
                success: function (jsonResult) {
                    if (jsonResult.code == 200){
                        $("#resultJSON").val(JSON.stringify(jsonResult.data));
                    }
                    layer.close(indexLoad);
                    layer.msg(jsonResult.msg);
                }
            });
            return false;
        });

    });



</script>

</html>